<template>
  <div class="code-layout">
    <!-- <div class="code-materials">
      <div class="file">
        <s3-file-list :s3_access_id="detailDataNow.s3_access_id" :s3_path="detailDataNow.s3_path"
          v-if="detailDataNow.s3_access_id" />
        <div v-else>
          <file-list v-if="version && version.id" :biz_id="version.id" type="model" />
        </div>
      </div>
      <md-preview :biz_id="$route.query.id" type="model" class="preview" />
    </div> -->

    <div class="code-info">
      <div class="code-info-item">
        <h3 class="info-title">基本信息<i class="el-icon-edit-outline edit" @click="updateBase" /></h3>
        <ul class="info-item">
          <li>
            <span class="key">名称:</span>
            <span class="val">{{ detailDataNow.name }}</span>
          </li>
          <li>
            <span class="key">别名： </span>
            <span class="val">{{ detailDataNow.alias }}</span>
          </li>
          <li>
            <span class="key"> 创建人： </span>
            <span class="val">{{ detailDataNow.create_user && (detailDataNow.create_user &&
              detailDataNow.create_user.nick_name ||
              detailDataNow.create_user && detailDataNow.create_user.username) }}</span>
          </li>
          <li>
            <span class="key">创建时间： </span>
            <span class="val">{{ detailDataNow.create_time }}</span>
          </li>
        </ul>
      </div>

      <div class="code-info-item">
        <h3 class="info-title">数据来源<i class="el-icon-edit-outline edit" @click="updateVersion" /></h3>
        <ul class="info-item">
          <span class="key">类型：</span>
          <span class="val" v-if="version.file_source == 1">本地上传 </span>
          <span class="val" v-if="version.file_source == 2">S3接入</span>
        </ul>
        <ul class="info-item" v-if="version.file_source == 2">
          <span class="key">bucket名称：</span>
          <span class="val">{{ version.s3_access_id }} </span>
        </ul>
        <ul class="info-item" v-if="version.file_source == 2">
          <span class="key">路径： </span>
          <span class="val">{{ version.s3_path }} </span>
        </ul>
      </div>

      <div class="code-md">
        <md-preview :biz_id="$route.query.id" type="model" class="preview" />
      </div>
    </div>

    <el-form class="form myself-form" ref="modelForm" :model="modelForm" :rules="modelSubmitRules" label-width="120px">
      <el-dialog :visible.sync="showModelDialog" title="模型" width="840px">
        <el-form-item label="范围" prop="visibility">
          <el-radio-group v-model="modelForm.visibility">
            <el-radio :label="0">私有的</el-radio>
            <el-radio :label="1">共享的</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="modelForm.name" />
        </el-form-item>
        <el-form-item label="别名" prop="alias">
          <el-input type="text" v-model="modelForm.alias" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="modelForm.desc" />
        </el-form-item>
        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="modelForm.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="commitModel">确定</el-button>
          <el-button class="none-type" @click="cancelModel">取消</el-button>
        </span>
      </el-dialog>
    </el-form>

    <el-dialog :visible.sync="showUpdateDialog" title="模型基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="updateVersionForm" label-width="120px">
        <el-form-item label="数据来源" prop="file_source">
          <el-radio-group v-model="updateVersionForm.file_source" v-if="version">
            <el-radio :label='1'>本地上传</el-radio>
            <el-radio :label='2'>S3接入</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="updateVersionForm.file_source == 2">
          <el-form-item label="bucket名称" prop="s3_access_id">
            <el-select v-model="updateVersionForm.s3_access_id">
              <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="s3路径" prop="s3_path">
            <el-input v-model="updateVersionForm.s3_path" class="entrance" />
          </el-form-item>
        </div>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitVersion">确定</el-button>
          <el-button class="none-type" @click="cancelVersion">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getAllAssetS3 } from '@/api/inout'
import { putModelVersion } from '@/api/modelversion'
import { putModel } from '@/api/model'
export default {
  data() {
    return {
      detailDataNow: {},
      updateVersionForm: {},
      s3Options: [],
      showUpdateDialog: false,
      submitRules: {
        s3_access_id: [
          { required: true, message: "s3不能为空" },
        ],
        s3_path: [
          { required: true, message: "s3路径不能为空" },
        ],
      },
      showModelDialog: false,
      modelForm: {},
      modelSubmitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        alias: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 5, max: 40, message: "长度在1到40个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
      },
    };
  },
  props: ['detailData', 'version'],
  watch: {
    detailData(val) {
      this.detailDataNow = val
    },
    version(val) {
      console.log("val", val)
    }
  },
  async mounted() {
    this.getS3()
    this.getData()
  },
  destroyed() {

  },
  methods: {
    updateBase() {
      this.showModelDialog = true
      this.modelForm = JSON.parse(JSON.stringify(this.detailDataNow))
    },
    commitModel() {
      this.$refs.modelForm.validate(async (valid) => {
        if (valid) {
          await putModel(this.modelForm)
          this.$emit("getDetail")
          this.detailData = JSON.parse(JSON.stringify(this.modelForm))
          this.showModelDialog = false
        }
      })
    },
    cancelModel() {
      this.showModelDialog = false
    },
    avatarPath(data) {
      this.modelForm.avatar = data;
    },
    async getData() {
      this.updateVersionForm = JSON.parse(JSON.stringify(this.version))
      this.detailDataNow = this.detailData
    },
    async getS3() {
      let res = await getAllAssetS3()
      this.s3Options = res.data
    },
    updateVersion() {
      this.showUpdateDialog = true
    },
    commitVersion() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putModelVersion(this.updateVersionForm);
          if (res && res.data) {
            this.showUpdateDialog = false
          }
        }
      })
    },
    cancelVersion() {
      this.showUpdateDialog = false
      this.getS3()
    }

  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
</style>